<template>
  <div class="crContainer">
    <div class="commonTitle">
      <div class="crHeader commonTitleMain">
        <h2>课次记录</h2>
        <div>
          <span>科目：</span>
          <Select v-model="formData.subject" @on-change="selectSubject" class="classSubject"
                  style="width:70px;height:27px;margin-right: 28px;">
            <Option v-for="item in subjectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <span>时间：</span>
          <Row>
            <DatePicker type="daterange" placement="bottom-end" placeholder="选择日期" @on-change="selectDate"
                        style="width: 200px"></DatePicker>
          </Row>
        </div>
      </div>
    </div>
    <div class="crHeader2">
      <div class="crHeader2-main">
        <p>{{dateTime}}</p>
        <div class="crHeader2-right">
          <p class="crHeader2-tab">
          <span v-for="(item,$index) in classType" :classType="$index" :class="{active:i==$index}"
                @click="selectClassType($index)">{{item}}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="crBody" v-if="courseRecord.length" @scroll="changeDate($event)">
      <div v-for="(cr,$index) in courseRecord">
        <div class="crItem">
          <p class="crTitle" ref="courseDate" v-show="$index!=0">{{cr.list[0].courseDate}}</p>
          <ul class="courseList2" :style="{width:courseListWidth}">
            <li class="card" v-for="item in cr.list">
              <div v-if="item.track_url!=null&&item.voice_url!=null&&item.voice_duration!=null" class="courseHead"
                   :class="{ 'evaluation': item.courseType==0, 'official': item.courseType==1}">
                <!--<img :src="item.imgUrl" alt="课程封面图">-->
                <div>
                  <img src="../../assets/images/cBg.png" alt="课程封面图">
                  <p class="playVideo" @click="start(item.courseUuid)">
                    <img src="../../assets/images/play.png" alt="播放">
                  </p>
                </div>
              </div>
              <div v-else class="courseHead"
                   :class="{ 'evaluation': item.courseType==0, 'official': item.courseType==1}">
                <!--<p class="notFound"><img src="../../assets/images/notFound.png" alt="无视频">检测不到回顾视频</p>-->
                <img src="../../assets/images/cBg2.png" alt="课程封面图">
              </div>
              <div class="courseBody">
                <div>
                  <p :title="item.name"
                     style="max-width:5em;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">{{item.name}}</p>
                  <p>{{item.subject}}</p>
                  <p>系统时长:</p>
                  <p>教学核算:</p>
                  <p v-if="item.confirm_btn_status==3">确认时长:</p>
                </div>
                <div>
                  <p>{{item.startTime}}- {{item.endTime}}</p>
                  <p>{{item.grade}}<span>{{item.subjectVersion}}</span></p>

                  <p v-if="item.confirm_btn_status==2">核算中</p>
                  <p v-else-if="item.confirm_btn_status==4">0min</p>
                  <p v-else>{{item.total_common_length||0}}min</p>

                  <p v-if="item.confirm_btn_status==2">核算中</p>
                  <p v-else-if="item.confirm_btn_status==4">0min</p>
                  <p v-else>{{item.sys_calc_hour||0}}min</p>

                  <p v-if="item.confirm_btn_status==3">{{item.confirm_length||0}}min</p>
                </div>
              </div>
              <div class="enterRoom">
                <!--正式课-->
                <template v-if="item.courseType==1">
                  <p v-if="item.confirm_btn_status==0" class="accounting">还未上课</p><!--还未上课-->
                  <template v-else-if="item.confirm_btn_status==1">
                    <p class="enterClass" @click="complain(item)">报备申请</p>
                    <p class="enterClass" @click="confirmHour(item)">确认课时</p>
                  </template>
                  <p v-else-if="item.confirm_btn_status==2" class="accounting">系统核算中</p>
                  <p v-else-if="item.confirm_btn_status==3" class="enterClass" @click="viewRcord(item.id)">查看明细</p>
                  <template v-else-if="item.confirm_btn_status==4">
                    <p class="accounting">未上课</p>
                    <p class="enterClass" @click="complain(item)">报备申请</p>
                    <p class="enterClass" @click="confirmHour(item)">确认课时</p>
                  </template>
                  <p v-else-if="item.confirm_btn_status==5" class="accounting">报备中</p>
                  <p v-else-if="item.confirm_btn_status==6" class="enterClass" @click="complain(item)">再次报备</p>
                  <p v-else-if="item.confirm_btn_status==7" class="accounting">报备成功</p>
                </template>

                <!--测评课-->
                <template v-else-if="item.courseType==0">
                  <p v-if="item.confirm_btn_status==0" class="accounting">还未上课</p><!--还未上课-->
                  <p v-else-if="item.confirm_btn_status==2" class="accounting">系统核算中</p>
                  <p v-else-if="item.confirm_btn_status==4" class="accounting">未上课</p>
                </template>


                <p v-if="item.class_each_feedbacks==''||item.class_each_feedbacks==null" class="enterClass enterClass2"
                   @click="classFeedback(item)">添加反馈</p>
                <p v-else class="enterClass enterClass3" @click="seeFeedback(item)">查看反馈</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--分页-->
      <div style="text-align: center;margin: 40px 0;">
        <Page :total="pageTotal" :show-sizer="true" show-elevator
              :page-size="20"
              :page-size-opts="[20]"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              show-total
        />
      </div>
    </div>
    <div class="courseListNull tip-null" v-else>
      <img src="../../assets/teacher/ai.png" alt="null">
      <span class="tip-null-text" style="font-size: 16px;color: #8d8d8d;">没有课程记录哦~</span>
    </div>
    <!--观看课程视频-->
    <div class="videoWarp" v-if="videoWarpper">
      <div class="videoContain" ref="videoContain">
        <div class="videoHead" ref="videohead">
          <img src="../../assets/images/close2.png" @click="videoWarpper=false" alt="关闭视频">
        </div>
        <div class="videoBody">
          <div class="videoMain" v-html="iframe"></div>
        </div>
      </div>
    </div>
    <!--老师反馈-->
    <Modal v-model="modal" width="430">
      <p slot="header">
        <span>老师反馈</span>
      </p>
      <p slot="close">
        <!--<Icon type="close-round"></Icon> -->
        <Icon type="md-close"/>
      </p>
      <div style="padding: 14px 14px 0;font-size: 14px;">
        <p style="font-size: 12px;margin-bottom: 10px;">{{ commentInfo.createTime }}</p>
        <p style="word-wrap: break-word;">{{ commentInfo.appraiseContent }}</p>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" @click="modal=false" style="width: 125px;">确定</Button>
      </div>
    </Modal>
    <!--报备申请-->
    <Modal v-model="complainModal" width="550" class="confirmHour" :mask-closable="false">
      <p slot="header">
        <span>报备申请</span>
      </p>
      <p slot="close">
        <img src="../../assets/images/close2.png" alt="关闭">
      </p>
      <Form ref="complainFormItem" :model="complainFormItem" :rules="complainRuleItem" :label-width="90">
        <FormItem label="学生姓名:">
          {{classInfo.name}}
        </FormItem>
        <FormItem label="上课时间:">
          {{classInfo.courseDate}} {{classInfo.planStartTime}}-{{classInfo.planEndTime}}
        </FormItem>
        <FormItem label="系统时长:">
          {{classInfo.total_common_length||0}}min
        </FormItem>
        <FormItem label="教学核算:">
          {{classInfo.sys_calc_hour||0}}min
        </FormItem>
        <FormItem class="block" prop="appeal_content" label="报备内容:">
          <Input type="textarea" v-model="complainFormItem.appeal_content" placeholder="请输入报备内容..." style="width:350px"
                 :autosize="{minRows: 10,maxRows: 16}"></Input>
        </FormItem>
      </Form>
      <Button class="submit" type="primary" @click="complain2('complainFormItem')">确认</Button>
      <p slot="footer"></p>
    </Modal>
    <!--确认课时-->
    <Modal v-model="confirmHourModal" width="550" class="confirmHour" :mask-closable="false">
      <p slot="header">
        <span>确认课时</span>
      </p>
      <p slot="close">
        <img src="../../assets/images/close2.png" alt="关闭">
      </p>
      <Form :label-width="90">
        <FormItem label="姓名:">
          {{classInfo.name}}
        </FormItem>
        <FormItem label="上课时间:">
          {{classInfo.courseDate}} {{classInfo.planStartTime}}-{{classInfo.planEndTime}}
        </FormItem>
        <!--<FormItem label="计划课时:">-->
        <!--{{classInfo.class_hour_consumption}}课时-->
        <!--</FormItem>-->
        <FormItem label="系统时长:">
          {{classInfo.total_common_length||0}}min
        </FormItem>
        <FormItem label="教学核算:">
          {{classInfo.sys_calc_hour||0}}min
        </FormItem>
      </Form>
      <Button class="submit" type="primary" @click="confirm">确认</Button>
      <p slot="footer"></p>
    </Modal>
    <!--课程反馈-->
    <Modal v-model="feedbackModal" width="550" class="confirmHour" :mask-closable="false">
      <p slot="header">
        <span>课程反馈</span>
      </p>
      <p slot="close">
        <img src="../../assets/images/close2.png" alt="关闭">
      </p>
      <Form ref="formItem" :model="formItem" :rules="ruleItem" :label-width="90">
        <FormItem label="姓名:">
          {{classInfo.name}}
        </FormItem>
        <FormItem class="block" prop="feedback_content" label="课程反馈:">
          <Input type="textarea" v-model="formItem.feedback_content" placeholder="请输入课程反馈..." style="width:350px"
                 :autosize="{minRows: 10,maxRows: 16}"></Input>
        </FormItem>
      </Form>
      <Button class="submit" type="primary" @click="confirm2('formItem')">确认</Button>
      <p slot="footer"></p>
    </Modal>
    <!--查看课程反馈-->
    <Modal v-model="feedbackModal2" width="550" class="confirmHour" :mask-closable="false">
      <p slot="header">
        <span>查看反馈</span>
      </p>
      <p slot="close">
        <img src="../../assets/images/close2.png" alt="关闭">
      </p>
      <Form :label-width="90">
        <FormItem label="姓名:">
          {{classInfo.name}}
        </FormItem>
        <FormItem class="block" label="课程反馈:">
          {{classInfo.class_each_feedbacks}}
        </FormItem>
      </Form>
      <p slot="footer"></p>
    </Modal>
    <!--查看记录-->
    <Modal v-model="viewRcordModal" width="860" class="viewRcord" :mask-closable="false">
      <p slot="header">
        <span>查看记录</span>
      </p>
      <div class="tableContent tableContent2">
        <Table
          class="tableData"
          :columns="recordHeaders"
          :data="recordList"
          border
        >
          <template slot-scope="{ row, index }" slot="room_type">
            <p v-if="row.room_type==2">嗨课堂</p>
            <p v-else-if="row.room_type==1">好视通</p>
          </template>
        </Table>
      </div>
      <p slot="close">
        <img src="../../assets/images/close2.png" alt="关闭">
      </p>

      <p slot="footer"></p>
    </Modal>
  </div>
</template>
<style lang="less">
  @import '../../style/courseRecord2.less';
</style>
<script>
  import {timestamp} from '@/common/js/common';
  import {GetQueryString} from '../../common/js/common';
  import {apiBase3} from '@/common/js/api.config';

  const token = sessionStorage.getItem('token')
  export default {
    data() {
      return {
        subjectList: [ //学科列表
          {value: '', label: '全部'},
          {value: '语文', label: '语文'},
          {value: '数学', label: '数学'},
          {value: '英语', label: '英语'},
          {value: '物理', label: '物理'},
          {value: '化学', label: '化学'},
          {value: '生物', label: '生物'},
          {value: '政治', label: '政治'},
          {value: '历史', label: '历史'},
          {value: '地理', label: '地理'},
          {value: '科学', label: '科学'},
        ],
        dateTime: "", //标题展示日期
        classType: ["全部", "测评课", "正式课"], //课程类型
        i: 0, //类型选中下标
        formData: {  //请求数据
          subject: '',
          startDate: "",
          endDate: "",
          courseType: "",
          page: 1,
          pageSize: 20,
        },
        courseRecord: [], //课程记录列表
        videoWarpper: false, //播放器显示
        iframe: "", //iframe DOM
        modal: false, //老师反馈弹窗显示
        commentInfo: '',  //老师反馈内容
        courseListWidth: '100%', //课程记录宽度
        viewTeacherAppraise: this.$store.state.viewTeacherAppraise,
        pageTotal: 0,

        //确认课时弹窗
        confirmClassActualHour: this.$store.state.confirmClassActualHour2,//确认课时api
        confirmHourModal: false,
        classInfo: {},
        confirmFormItem: {
          class_each_id: "",
        },
        //申请报备弹窗
        complainAPI: this.$store.state.appeal,//确认课时api
        complainModal: false,
        complainFormItem: {
          class_each_id: "",
          appeal_content: "",
        },
        complainRuleItem: {
          appeal_content: [{required: true, message: '请输入报备内容', trigger: 'blur'}],
        },
        //课程反馈
        commitFeedback: this.$store.state.commitFeedback,//课程反馈api
        feedbackModal: false,
        feedbackModal2: false,
        modalType: "",//课程反馈类型，是反馈还是查看
        formItem: {
          class_each_id: "",
          feedback_content: "",
        },
        ruleItem: {
          feedback_content: [{required: true, message: '请输入课程反馈', trigger: 'blur'}],
        },
        //查看记录弹窗
        getRoomRecords: this.$store.state.getRoomRecords,//获取进出房间记录
        viewRcordModal: false,
        recordHeaders: [
          {
            title: "姓名",
            key: "real_name",
            width: 130,
          },
          {
            title: "客户端类型",
            key: "room_type",
            width: 130,
            slot: "room_type"
          },
          {
            title: "用户类型",
            key: "user_type",
            width: 120,
          },
          {
            title: "进入时间",
            key: "enter_time",
            width: 180,
          },
          {
            title: "退出时间",
            key: "leave_time",
            width: 180,
          },
        ],
        recordList: []
      }
    },
    mounted() {
      this.courseRecordList();
    },
    updated() {

      if (this.courseRecord.length) {
        let crBody = document.querySelector('.crBody');
        // crBody - (padding 80 - margin 65 = 15);
        this.courseListWidth = crBody.clientWidth - 15 + 'px';
        window.onresize = () => {
          this.courseListWidth = crBody.clientWidth - 15 + 'px';
        }
      }

    },
    methods: {
      selectSubject(value) {  //科目选择
        this.formData.subject = value;
        this.formData.page = 1;
        this.courseRecordList()
      },
      selectDate(date) {  //日期时间选择
        [this.formData.startDate, this.formData.endDate] = date;
        this.formData.page = 1;
        this.courseRecordList();
      },
      selectClassType(index) {  //课程类型选择
        this.i = index;
        if (index == 0) {
          this.formData.courseType = "";
        } else {
          this.formData.courseType = index - 1;
        }
        this.formData.page = 1;
        this.courseRecordList();
      },
      courseRecordList() {  //查询课程记录列表
        this.$axios.get(this.$store.state.getCourseRecordList2, {
          params: this.formData,
          baseURL: apiBase3(),
        }).then(({data}) => {
          this.courseRecord = data.data.data;
          this.pageTotal = data.data.total;
          if (this.courseRecord.length) {
            this.dateTime = this.courseRecord[0].courseDate;
          } else {
            this.dateTime = this.formData.startDate;
            this.$Message.error("没有课程记录哦！");
          }
        })
      },
      //页码改变
      pageChange(page) {
        this.formData.page = page;
        this.courseRecordList();
      },
      //页码size改变
      pageSizeChange(pageSize) {
        this.formData.pageSize = pageSize;
        this.courseRecordList();
      },
      start(uuid) {  //查看回放
        this.videoWarpper = true;
        this.iframe = `<iframe src="../../static/play2.html?token=${token}&uuid=${uuid}"
                               id="iframe"
                               width="100%"
                               height="100%"
                               frameborder="no"
                               marginwidth="0"
                               marginheight="0"
                               scrolling="no"
                               allowtransparency="yes"
                               allowfullscreen="true"></iframe>`;
      },
      changeDate(e) {  //日期切换
        let crItem = document.getElementsByClassName("crItem");
        let scrollTop = e.target.scrollTop;
        for (let i = 0, length = crItem.length; i < length; i++) {
          if (scrollTop >= crItem[i].offsetTop) {
            this.dateTime = crItem[i].children[0].innerHTML;
          }
        }
      },

      feedback(courseUuid) {  //填写老师反馈
        let args = `{
          "requesttype": 22,
          "courseUuid": "${courseUuid}",
          "callback": "refreshTeacherRecord"
        }`;
        sendData(args);
      },
      readFeedback(classTeacherAppraiseUuid) {  //查看老师反馈
        this.$axios.get(this.viewTeacherAppraise, {
          params: {
            classTeacherAppraiseUuid: classTeacherAppraiseUuid,
          }
        }).then(({data}) => {
          this.commentInfo = data.data
          this.modal = true;
        })

      },

      //确认课时
      confirmHour(item) {
        this.classInfo = item;
        this.confirmFormItem.class_each_id = item.id;
        this.confirmHourModal = true;

      },
      confirm(name) {//确认课时-点击确定
        this.$axios.post(this.confirmClassActualHour, this.confirmFormItem, {
          baseURL: apiBase3(),
        }).then(res => {
          this.$Notice.success({
            title: '',
            desc: '确认成功',
            duration: 3
          });
          this.confirmHourModal = false;
          this.courseRecordList();
        });
      },
      //报备申请
      complain(item) {
        this.classInfo = item;
        this.complainFormItem.class_each_id = item.id;
        this.complainModal = true;
        this.complainFormItem.appeal_content = "";
      },
      complain2(name) {//报备申请-点击确定
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$axios.post(this.complainAPI, this.complainFormItem, {
              baseURL: apiBase3(),
            }).then(res => {
              this.$Notice.success({
                title: '',
                desc: '报备成功',
                duration: 3
              });
              this.complainModal = false;
              this.courseRecordList();
            });
          }
        })
      },
      //课程反馈
      classFeedback(item) {
        this.classInfo = item;
        this.formItem.class_each_id = item.id;
        this.feedbackModal = true;
        this.formItem.feedback_content = '';//初始化
      },
      //查看反馈
      seeFeedback(item) {
        this.classInfo = item;
        this.feedbackModal2 = true;
      },
      confirm2(name) {//课程反馈-点击确定
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$axios.post(this.commitFeedback, this.formItem, {
              baseURL: apiBase3(),
            }).then(res => {
              this.$Notice.success({
                title: '',
                desc: '反馈成功',
                duration: 3
              });
              this.feedbackModal = false;
              this.courseRecordList();
            });
          }
        });
      },
      //查看记录
      viewRcord(id) {
        this.viewRcordModal = true;
        this.$axios.post(this.getRoomRecords, {
          class_each_id: id
        }, {
          baseURL: apiBase3(),
        }).then(res => {
          this.recordList = [...res.data.data.hkt, ...res.data.data.hst]
          // this.recordList=res.data.data.hst;
        });
      }
    },
    destroyed() {
      window.onresize = null;
    },
  }
</script>
